<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
	 xmlns:mf="http://typo3.org/ns/MiniFranske/FsMediaGallery/ViewHelpers">

	<!--
	 Displays an album list
	 Theme: Bootstrap3
	-->

	<f:section name="AlbumsList">
		<mf:widget.paginate objects="{mediaAlbums}" as="paginatedAlbums" widgetId="album" configuration="{itemsPerPage:settings.list.pagination.itemsPerPage, insertAbove:settings.list.pagination.insertAbove, insertBelow:settings.list.pagination.insertBelow, maximumNumberOfLinks:settings.list.pagination.maximumNumberOfLinks, pagesBefore:settings.list.pagination.pagesBefore, pagesAfter:settings.list.pagination.pagesAfter}">
			<f:if condition="{paginatedAlbums}">
				<f:then>
					<!-- 首页相册展示1 -->
					<style>
						/*-- 相册 --*/
						.photo {}
						.photo .img {clear:both; position:relative;display:block;width:100%;}
						.photo img {border-radius: 6px;width:100%;}
						.photo span {display:block;width:100%;text-align:center;}
						
					</style>
					<div class="c-content-box c-size-md c-bg-grey-1">
						<div class="container">
							<div class="row">
								<div class="col-xs-12 c-content-title-1">
									<h3 class="c-center c-font-uppercase c-font-bold">图文故事</h3>
									<div class="c-line-center"></div>
								</div>
							</div>
							<div class="row">
								<f:for each="{paginatedAlbums}" as="pagedMediaAlbum">
										<div class="col-xs-12 col-sm-6 col-md-4 photo" style="margin-bottom:10px;">
											<div>
												<f:render partial="MediaAlbum/ThumbN" section="Thumb" arguments="{mediaAlbum:pagedMediaAlbum, random:settings.list.thumb.random, width:settings.list.thumb.width, height:settings.list.thumb.height, resizeMode:settings.list.thumb.resizeMode}" />
											</div>
										</div>
								</f:for>
							</div>
						</div>
					</div>
				</f:then>
				<f:else>
					<div class="alert alert-info">
						<p><f:translate key="no_albums_found">No albums found.</f:translate></p>
					</div>
				</f:else>
			</f:if>
		</mf:widget.paginate>
	</f:section>

</div>